<h1 mat-dialog-title>{{ 'Add To Pool' | translate }}</h1>

<form class="ix-form-container" [formGroup]="form" (submit)="onSubmit()">
  <div mat-dialog-content>
    @if (noPoolsDisks.length) {
      <h4>{{ 'Unassigned Disks' | translate }}</h4>
      <ul class="unused-disks">
        @for (disk of noPoolsDisks; track disk.formattedDisk) {
          <li>
            {{ disk.formattedDisk }}
          </li>
        }
      </ul>
    }

    @if (exportedPoolsDisks.length) {
      <h4>{{ 'Disks with exported pools' | translate }}</h4>
      <ul class="unused-disks">
        @for (disk of exportedPoolsDisks; track disk.formattedDisk) {
          <li>
            {{ disk.formattedDisk }}
            @if (disk.exportedPool) {
              <ix-warning
                class="inline-warning"
                [message]="getWarningText(disk.exportedPool)"
              ></ix-warning>
            }
          </li>
        }
      </ul>
    }

    <ix-fieldset>
      <ix-radio-group
        formControlName="toPool"
        [label]="'Add Disks To:' | translate"
        [options]="toPoolOptions$"
      >
      </ix-radio-group>

      @if (isExistingMode) {
        <ix-select
          formControlName="pool"
          [label]="'Existing Pool' | translate"
          [required]="true"
          [options]="poolOptions$"
        ></ix-select>
      }
    </ix-fieldset>
  </div>

  <div mat-dialog-actions>
    <button mat-button type="button" ixTest="cancel" [matDialogClose]="false">
      {{ 'Cancel' | translate }}
    </button>

    <button
      *ixRequiresRoles="requiredRoles"
      mat-button
      type="submit"
      color="primary"
      ixTest="add-disks"
      [disabled]="form.invalid"
    >
      {{ 'Add Disks' | translate }}
    </button>
  </div>
</form>
